<nz-content >
  <div class="search-collapse">
    <form
      nz-form
      [nzLayout]="'inline'">
      <nz-form-item>
        <nz-form-label>角色名称</nz-form-label>
        <nz-form-control>
          <input nz-input [(ngModel)]="_cnd.roleName" name="roleName"/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label>权限字符</nz-form-label>
        <nz-form-control>
          <input nz-input [(ngModel)]="_cnd.roleKey" name="roleKey"/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label>角色状态</nz-form-label>
        <nz-form-control>

          <nz-select
            style="width: 200px;"
            [(ngModel)]="_cnd.status"
            name="status"
          >
            <nz-option nzLabel="全部" nzValue=""></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label>创建时间</nz-form-label>
        <nz-form-control>
          <nz-range-picker [(ngModel)]="createTimes" name="createTimes"></nz-range-picker>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control>
          <button nz-button class="btn-primary" (click)="search()"> <i nz-icon nzType="search"></i>搜索</button>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control>
          <button nz-button class="btn-warning" (click)="search(true)"> <i nz-icon nzType="sync"></i>重置</button>
        </nz-form-control>
      </nz-form-item>
    </form>
  </div>


  <div class="search-table">

    <div class="operate">
      <button nz-button [nzType]="'primary'" (click)="openOrCloseModal(true)"><i nz-icon nzType="plus"></i>新增</button>
      <button  *ngIf="!isSm()" nz-button [nzType]="'edit'"  [disabled]="!isEditBtn" (click)="editInfoTop()"><i nz-icon nzType="form"></i>编辑</button>
      <button  *ngIf="!isSm()" nz-button [nzType]="'delete'" [disabled]="!isDeleteBtn"
              nz-popconfirm
              nzPopconfirmTitle="确定删除?"
              nzPopconfirmPlacement="top"
              (nzOnConfirm)="deleteSome()"
      ><i nz-icon nzType="close"></i>删除</button>
        <button nz-button [nzType]="'refresh'" (click)="search()"> <i nz-icon nzType="sync"></i>刷新</button>
    </div>


    <nz-table
      *ngIf="!isSm()"
      #ajaxTable
      nzShowSizeChanger
      [nzFrontPagination]="false"
      [nzData]="_page.rows"
      [nzLoading]="loading"
      [nzTotal]="_page.total"
      [(nzPageIndex)]="_cnd.pageNum"
      [(nzPageSize)]="_cnd.pageSize"
      [nzSize]="'small'"
      [nzShowQuickJumper]="true"
      [nzShowTotal]="totalTemplate"
      (nzPageIndexChange)="search()"
      (nzPageSizeChange)="search()"
    >
      <thead>
      <tr>
        <th
          nzShowCheckbox
          [(nzChecked)]="isAllChecked"
          (nzCheckedChange)="checkedAll($event)"
        ></th>

        <th>角色ID</th>
        <th>角色名称</th>
        <th>权限字符</th>
        <th>显示顺序</th>
        <th>角色状态</th>
        <th>创建时间</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let data of ajaxTable.data">
        <td
          nzShowCheckbox
          [(nzChecked)]="checkedIdMap[data.roleId]"
          (nzCheckedChange)="checkedChange()"
        ></td>
        <td>{{ data.roleId }}</td>
        <td>{{ data.roleName }}</td>
        <td>{{ data.roleKey }}</td>
        <td>{{ data.roleSort }}</td>
        <td>{{ data.status }}</td>
        <td>{{ data.createTime }}</td>
        <td>
          <button nz-button [nzType]="'edit'" (click)="editInfo(data.roleId)" ><i nz-icon nzType="form"></i>编辑</button>
          <button nz-popconfirm
                  nzPopconfirmTitle="确定删除?"
                  nzPopconfirmPlacement="top"
                  (nzOnConfirm)="deleteOne(data.roleId)"
                  nz-button
                  [nzType]="'delete'" ><i nz-icon nzType="close"></i>删除</button>
          <button nz-button [nzType]="'other'" (click)="toUser(data.roleId)" ><i nz-icon nzType="user"></i>分配用户</button>
        </td>

      </tr>
      </tbody>
      <ng-template #totalTemplate let-total>共{{ total }}条数据</ng-template>
    </nz-table>


    <nz-table
      *ngIf="isSm()"
      #ajaxTable
      [nzFrontPagination]="false"
      [nzData]="_page.rows"
      [nzLoading]="loading"
      [nzTotal]="_page.total"
      [(nzPageIndex)]="_cnd.pageNum"
      [(nzPageSize)]="_cnd.pageSize"
      [nzSize]="'small'"
      (nzPageIndexChange)="search()"
    >
      <tbody *ngFor="let data of ajaxTable.data">
      <tr>
        <td>
          <div class="card-views">
            <div class="card-view"><span class="title" >角色ID</span><span class="value">{{ data.roleId }}</span></div>
            <div class="card-view"><span class="title" >角色名称</span><span class="value">{{ data.roleName }}</span></div>
            <div class="card-view"><span class="title" >权限字符</span><span class="value">{{ data.roleKey }}</span></div>
            <div class="card-view"><span class="title" >显示顺序</span><span class="value">{{ data.roleSort }}</span></div>
            <div class="card-view"><span class="title" >创建时间</span><span class="value">{{ data.createTime }}</span>
            </div>
            <div class="card-view">
              <span class="title" style="text-align: center; ">操作</span>
              <span class="value">
                <button nz-button [nzType]="'edit'" (click)="editInfo(data.roleId)" ><i nz-icon nzType="form"></i>编辑</button>
                <button nz-popconfirm
                        nzPopconfirmTitle="确定删除?"
                        nzPopconfirmPlacement="top"
                        (nzOnConfirm)="deleteOne(data.roleId)"
                        nz-button
                        [nzType]="'delete'" ><i nz-icon nzType="close"></i>删除</button>
                <button nz-button [nzType]="'other'" (click)="toUser(data.roleId)" ><i nz-icon nzType="user"></i>分配用户</button>
              </span>
            </div>
          </div>
        </td>
      </tr>
      </tbody>
    </nz-table>


  </div>

  <!--crud-->
  <nz-modal class="formNzModal"
            [(nzVisible)]="isVisible"
            [nzTitle]="modalTitle"
            [nzWidth]="modalWidth"
            nzMaskClosable="false"
            (nzOnCancel)="openOrCloseModal(false)"
            (nzOnOk)="saveOrUpdate()"
            [nzOkLoading]="isOkLoading"
  >
    <div style="padding:0px;overflow: auto;" [ngStyle]="{ 'height': autoHeight+'px'}">
    <form nz-form [formGroup]="validateForm">
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="roleName">角色名称</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="角色名称不能为空或已存在">
          <input nz-input formControlName="roleName" id="roleName" />
        </nz-form-control>
      </nz-form-item>


      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="roleKey">权限字符</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="权限字符不能为空或已存在">
          <input nz-input formControlName="roleKey" id="roleKey" />
        </nz-form-control>
      </nz-form-item>


      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="roleSort">显示顺序</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="显示顺序不能为空">
          <input nz-input formControlName="roleSort" id="roleSort" />
        </nz-form-control>
      </nz-form-item>


      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="status">角色状态</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="角色状态不能为空">
          <nz-select formControlName="status" id="status">
            <nz-option nzValue="0" nzLabel="正常"></nz-option>
            <nz-option nzValue="1" nzLabel="禁用"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>


      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24"  nzFor="remark">备注</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <input nz-input formControlName="remark" id="remark" />
        </nz-form-control>
      </nz-form-item>


    </form>
    </div>
  </nz-modal>


  <nz-modal class="formNzModal"
            [(nzVisible)]="isUserVisible"
            [nzTitle]="'用户分配'"
            [nzWidth]="'1000'"
            nzMaskClosable="false"
            (nzOnCancel)="openOrCloseModal(false)"
            (nzOnOk)="saveOrUpdate()"
            [nzOkLoading]="isOkLoading"
  >

  </nz-modal>



</nz-content>
